<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="format-detection" content="email=no"/>
    <meta name="wap-font-scale" content="no"/>
    <meta name="viewport" content="user-scalable=no, width=device-width"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>change</title>
    <meta name="description"
          content="AXUI前端框架是面向设计，满足设计多样化需求的前端解决方案，减少或剔除JS文件资源和API。AXUI前端框架原则是能用css写的不用js；能用js写的不用插件；能用插件的不重复引用插件。核心文件只有ax.css和ax.js，加载速度飞快。">
    <meta name="keywords" content="前端框架,UI,CSS3,HTML5,jQuery,面向设计,前端工程师,">
    <link th:href="@{/css/ax-lss.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/ax.css}" rel="stylesheet" type="text/css">
    <link th:href="@{/css/ax-response.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/js/jquery-1.9.1.min.js}"></script>
    <script th:src="@{/js/jquery.min.js}"></script>

    <style>
        .ax-form-group {
            padding: 30px;
            text-align: center;
        }
    </style>

    <script>
        function checkPassword111() {
            let one = document.getElementById("inputOne");
            let two = document.getElementById("inputTwo");
            let old = document.getElementById("oldPassword");
            let element = document.getElementById("checkSpan1");
            $.ajax({
                url: "http://localhost:8080/isItTheSame",
                type: "GET",
                data: {
                    password: one.value,
                    checkPassword: two.value,
                    oldPassword: old.value
                },
                success: function (data) {
                    if (data === 0) {
                        element.innerText = "密码输入不正确";
                        element.style.color = 'red'
                    } else if (data === 1) {
                        element.innerText = "俩次输入的密码不一致";
                        element.style.color = 'red';
                    } else if (data === 2) {
                        window.location.href = "http://localhost:8080/";
                    }
                }
            })
        }

        function backToHome() {
            window.location.href = "http://localhost:8080/";
        }
    </script>

</head>
<body>


<form th:action="@{/change}" method="post">

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">旧密码：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="oldPassword" id="oldPassword" placeholder="请输入原来的密码"
                           oninput="value=value.replace(/[^\d]/g,'')"
                           type="password"
                           maxlength="15" required>
                </div>
            </div>
            <div class="ax-form-txt ax-color-danger"><span id="checkSpan2" th:text="${msgOld}" style="color: red"></span></div>
        </div>
    </div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">修改密码：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="password" id="inputOne" placeholder="请输入新密码" oninput="value=value.replace(/[^\d]/g,'')"
                           type="password"
                           maxlength="15" required>
                </div>
            </div>
        </div>
    </div>

    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label">修改密码：</div>
            <div class="ax-form-con">
                <div class="ax-form-input">
                    <input name="checkPassword" id="inputTwo" placeholder="请再输入一次"
                           oninput="value=value.replace(/[^\d]/g,'')" type="password"
                           maxlength="15" required>
                </div>
            </div>
            <div class="ax-form-txt ax-color-danger"><span id="checkSpan1" th:text="${msg}" style="color: red"></span></div>
        </div>
    </div>


    <div class="ax-form-group">
        <div class="ax-flex-row">
            <div class="ax-form-label"></div>
            <div class="ax-flex-block">
                <div class="ax-form-input">
                    <button type="submit" class="ax-btn ax-primary ax-full">提交</button>
                </div>
            </div>
        </div>
    </div>

</form>


</body>
</html>